<template>
    <div>
        <div class="TitlePic">
            <img src="../assets/img/CommunistParty.jpg"/>
        </div>
        <div class="BoxContainer" >
            <div v-for="item in cardList" :key="item.title">
                 <card :pic=item.pic  :title="item.title"  :tag="item.tag" :router="item.router"></card>
            </div>
        </div>
    </div>
</template>
<script>
import card from '../components/card.vue'
export default {
    name: "CodeGarden",
    components: {
        card
    },
    props: [],
    data() {
        return {
        cardList: [
                {
                    pic: "https://pic.imgdb.cn/item/651193f2c458853aef62979a.png",
                    title: "expanding - cards",
                    tag: "HTML轮子",
                    router: "SecondViews/expandingCards"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fc9e7c458853aefac7fa9.png",
                    title: "progress-Steps",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fca1cc458853aefac87d3.gif",
                    title: "rotating-navigation-animation",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fca63c458853aefacb692.gif",
                    title: "hidden-search-widget",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/-1.gif",
                    title: "blurry-loading",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fcba7c458853aefad42ef.gif",
                    title: "blurry-loading",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fc9e7c458853aefac7fa9.png",
                    title: "scroll-animation",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/5a12a53e7f9a3b72eea962481bf39950.gif",
                    title: "Split Landing Page",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/683930324a7dbf464912000e4ba10911.gif",
                    title: "Form Wave",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/Snipaste_2023-10-06_17-36-21.png",
                    title: "sound-board",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/Snipaste_2023-10-06_17-42-32.png",
                    title: "dad-jokes",
                    tag: "fetch请求"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/Snipaste_2023-10-06_17-45-13.png",
                    title: "dad-jokes",
                    tag: "键盘事件"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fe52ec458853aefbb3335.png",
                    title: "Faq Collapse",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/a980d6d59bf0f144fdc2535055aae593.gif",
                    title: "Random Choice Picker",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/b167fc8ec03e85e0774a42bcb1b126cb.gif",
                    title: "Animated Navigation",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/b31d24f9d92556cb4cec3dd80e1de563.gif",
                    title: "Incrementing Counter",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fe62fc458853aefbbc2ad.gif",
                    title: "Drink Water",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fe72ec458853aefbc81fe.png",
                    title: "Movie App",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fe789c458853aefbc8e33.png",
                    title: "Background Slider",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fe9d2c458853aefbead32.gif",
                    title: "Theme Clock",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fec3dc458853aefc0666c.gif",
                    title: "Button Ripple Effect",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fed32c458853aefc0ef55.gif",
                    title: "Drag N Drop",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fef26c458853aefc21fc3.png",
                    title: "Drawing App",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651fefc5c458853aefc23c6b.gif",
                    title: "Kinetic Loader",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://pic.imgdb.cn/item/651ff067c458853aefc2e9e2.gif",
                    title: "Content Placeholder",
                    tag: "HTML轮子"
                },
                {
                    pic: "https://www.z4a.net/images/2023/10/06/d8f37fabf76e52c2396de01726fbab41.gif",
                    title: "Double Vertical Slider",
                    tag: "HTML轮子"
                },
                // ... add more card objects as needed
            ]

        };
    },
    computed: {},
    watch: {},
    methods: {
    },
    created() { },
    mounted() { },
    destroyed() { },
};
</script>

<style scoped>
.TitlePic{
    width: 100%;
}

.TitlePic img {
    width: 100%;
}
.BoxContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
</style>
